<template>
    <div>
        <template>
            <Tabs type="card" @on-click="TabChange" v-model="value">
                <TabPane label="区域列表">
                    <template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
                        <vxe-toolbar>
                            <template v-slot:buttons>
                                <vxe-button @click="$refs.xTree.setAllTreeExpansion(true)">展开所有</vxe-button>
                                <vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有</vxe-button>
                            </template>
                        </vxe-toolbar>
                        <vxe-table
                                border
                                resizable
                                row-id="id"
                                :row-key="true"
                                show-overflow="tooltip"
                                highlight-hover-row
                                align="center"
                                header-align="center"
                                ref="xTree"
                                :loading="tableLoading"
                                :tree-config="{children: 'children',expandAll: true,line: true }"
                                :data="dataList">
                            <vxe-table-column field="name" title="区域名称" fixed="left" tree-node></vxe-table-column>
                            <vxe-table-column field="code" title="区域编码"></vxe-table-column>
                            <vxe-table-column field="type" title="区域类型">
                                <template v-slot="{ row }">
                                    <div v-if="row.type==1" type="1">国家</div>
                                    <div v-if="row.type==2" type="2">省份丶直辖市</div>
                                    <div v-if="row.type==3" type="3">地市</div>
                                    <div v-if="row.type==4" type="4">区县</div>
                                </template>
                            </vxe-table-column>
                            <vxe-table-column field="remarks" title="备注"></vxe-table-column>
                            <vxe-table-column field="date" min-width="20%" title="操作">
                                <template v-slot="{ row }">
                                    <Button size="small" class="actionBtn" type="primary" @click="addArea(row)">添加下级
                                    </Button>
                                    <Button size="small" class="actionBtn" type="info" @click="updateArea(row)">修改
                                    </Button>
                                    <Button size="small" class="actionBtn" type="error" @click="remove(row.id)"
                                            :loading="deleteLoading">删除
                                    </Button>
                                </template>
                            </vxe-table-column>
                        </vxe-table>
                    </template>
                </TabPane>
                <TabPane v-if="tabvalue===1" label="添加区域">
                    <add-form :AreaList="AreaList" :row="row" :updaterow="updaterow"
                              @changeTpye="changeTpye"></add-form>
                </TabPane>
                <TabPane v-if="tabvalue===2" label="修改区域">
                    <add-form :AreaList="AreaList" :row="row" :updaterow="updaterow"
                              @changeTpye="changeTpye"></add-form>
                </TabPane>
            </Tabs>
        </template>
    </div>
</template>

<script>
import { getAreaList, delArea } from '../../../api/system/sys-area-list'
import AddForm from './components/add-form'

export default {
  name: 'WlAreaList',
  components: {
    AddForm

  },
  data () {
    return {
      value: 0,
      tabvalue: 1,
      dataList: [],
      TreeList: [],
      treeID: '',
      treeIDName: '',
      AreaList: [],
      row: {},
      updaterow: {},
      deleteLoading: false,
      tableLoading: false
    }
  },
  methods: {
    init () {
      this.tableLoading = true
      getAreaList().then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableLoading = false
          data.data.forEach(item => {
            item.title = item.name
          })
          this.dataList = this.$common.toTree(data.data, 'children', 'id', 'parent_id')
          this.AreaList = data.data
          /* this.treeID = this.data1[0].id
          this.treeIDName = this.data1[0].name */
        } else {
          this.$Message.error(ret.data.errmsg)
          this.tableLoading = false
        }
      })
    },
    TabChange () {
      if (this.value === 0) {
        this.tabvalue = 1
        this.changeTpye()
      }
    },
    changeTpye () {
      this.row = {}
      this.updaterow = {}
      this.value = 0
      this.tabvalue = 1
      this.init()
    },
    addArea (row) {
      this.value = 1
      this.tabvalue = 1
      this.row = row
    },
    updateArea (row) {
      this.value = 1
      this.tabvalue = 2
      this.updaterow = row
    },
    remove (data) {
      this.$Modal.confirm({
        title: '确认删除此菜单么？',
        content: '此操作会删除该菜单下全部菜单',
        loading: true,
        onOk: () => {
          this.deleteArea(data)
        }
      })
    },
    deleteArea (val) {
      console.log(val, '删除数据')
      delArea({ id: val }).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Modal.remove()
          this.init()
          this.$Message.success({
            content: '删除成功！'
          })
        } else {
          this.$Modal.remove()
          this.$Message.error({
            content: '删除失败\n' + ret.data.errmsg
          })
        }
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
    .actionBtn {
        margin-right: 5px;
        margin-bottom: 5px;
    }
</style>
